<template>
  <div></div>
</template>

<script setup>
import { createVNode } from "vue";
import { notification } from "ant-design-vue";

const props = defineProps({
  message: { type: String, required: true },
  description: { type: String, required: true },
  duration: { type: Number, default: 5 },
  onUndo: { type: Function, required: true },
});

const showNotification = () => {
  const progressBar = createVNode("div", {
    style: {
      position: "absolute",
      bottom: 0,
      left: 0,
      width: "100%",
      height: "4px",
      backgroundColor: "#20C77C",
      animation: `progressBarAnimation ${props.duration}s linear forwards`,
    },
  });

  notification.open({
    message: props.message,
    btn: createVNode(
      "a-button",
      {
        type: "text", 
        style: {
          color: "#20C77C",
          backgroundColor: "transparent",
          border: "none",
          padding: 0,
          fontSize: "14px",
          cursor: "pointer",
          boxShadow: "none",
        },
        onClick: props.onUndo,
      },
      "撤销"
    ),
    duration: props.duration,
    description: createVNode("div", { style: { position: "relative", paddingBottom: "8px" } }, [
      createVNode("p", null, props.description), 
      progressBar, 
    ]),
  });
};


showNotification();
</script>

<style>

@keyframes progressBarAnimation {
  from {
    width: 100%;
  }
  to {
    width: 0;
  }
}
</style>
